import React, { useState } from "react";
import {
  Text,
  View,
  StyleSheet,
  Modal,
  Pressable,
  TouchableWithoutFeedback,
} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { RFPercentage /*RFValue*/ } from "react-native-responsive-fontsize";
import { useCategory } from "../../hooks/useCategory";
import { CategoryBtn } from "../Category";
import * as S from "./styles";

function EventContent({ initEvent = {}, selectedEvent, closeFun }) {
  const { name, level } = initEvent;
  let initCategory = null;
  const { categorys } = useCategory();
  if (name && name !== "请选择分类") {
    initCategory = findCategoryById(categorys, "name", name).children;
  }

  const [category, setCategory] = useState(initCategory || categorys);
  const [selectBtn, setSelectBtn] = useState(null);
  const [selectedLevel, setSelectLevel] = useState(level || 1);

  function findLevelById(categorys, id) {
    let levels = 1;
    categorys.forEach((cg1) => {
      if (cg1.id === id) {
        levels = 2;
      } else if (cg1.children) {
        cg1.children.forEach((cg2) => {
          if (cg2.id === id) {
            levels = 3;
          } else if (cg2.children) {
            cg2.children.forEach((cg3) => {
              if (cg3.id === id) {
                levels = 4;
              }
            });
          }
        });
      }
    });

    return levels;
  }

  function findCategoryById(categorys, type, id) {
    let result = {};
    categorys.forEach((cg1) => {
      if (cg1[type] === id) {
        result = cg1;
      } else if (cg1.children) {
        cg1.children.forEach((cg2) => {
          if (cg2[type] === id) {
            result = cg2;
          } else if (cg2.children) {
            cg2.children.forEach((cg3) => {
              if (cg3[type] === id) {
                result = cg3;
              }
            });
          }
        });
      }
    });

    return result;
  }

  return (
    <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
      <View
        style={{
          width: "100%",
          minHeight: /*RFValue*/(300),
          // padding: /*RFValue*/(16),
          paddingHorizontal:6,
          paddingBottom:24
        }}
      >
        <S.Container>
          <Pressable
            style={styles.titleBtn}
            onPress={() => {
              selectedEvent({ ...selectBtn, eventType: selectedLevel - 1 });
              closeFun();
            }}
          >
            <S.Icon name="chevron-left" color="rgba(65, 79, 102, 1)" />
            <Text style={styles.titleText}>{"返回记录"}</Text>
          </Pressable>
          <S.IconWrapper onPress={closeFun} activeOpacity={0.7}>
            <S.Icon name="x" />
          </S.IconWrapper>
        </S.Container>
        <View>
          <View style={{ flexDirection: "row", paddingLeft: /*RFValue*/ 16 }}>
            <Pressable
              activeOpacity={0.7}
              onPress={() => {
                setCategory(categorys);
                setSelectLevel(1);
              }}
              style={{ flexDirection: "row" }}
            >
              <Text
                style={[
                  styles.levelText,
                  selectedLevel === 1 && styles.selectedLevelText,
                ]}
              >
                一级
              </Text>
              {selectedLevel !== 1 && (
                <Text style={[styles.levelText, styles.margin]}> ＞</Text>
              )}
            </Pressable>
            {selectedLevel !== 1 && (
              <Pressable
                onPress={() => {
                  if (selectBtn) {
                    const cg2 = findCategoryById(
                      categorys,
                      "id",
                      selectBtn.fatherId
                    );
                    setCategory(cg2.children);
                    setSelectLevel(2);
                  }
                }}
                style={{ flexDirection: "row" }}
              >
                <Text
                  style={[
                    styles.levelText,
                    selectedLevel === 2 && styles.selectedLevelText,
                  ]}
                >
                  二级
                </Text>
                {(selectedLevel === 4 || selectedLevel === 3) && (
                  <Text style={[styles.levelText, styles.margin]}> ＞</Text>
                )}
              </Pressable>
            )}
            {(selectedLevel === 4 || selectedLevel === 3) && (
              <TouchableOpacity>
                <Text
                  style={[
                    styles.levelText,
                    (selectedLevel === 4 || selectedLevel === 3) &&
                      styles.selectedLevelText,
                  ]}
                >
                  三级
                </Text>
              </TouchableOpacity>
            )}
          </View>
          <View
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
              justifyContent: "flex-start",
              // marginTop: /*RFValue*/(16),
            }}
          >
            {category &&
              category.map((cg) => {
                return (
                  <CategoryBtn
                    onPress={() => {
                      setSelectLevel(findLevelById(categorys, cg.id));
                      setSelectBtn(cg);
                      if (cg.children.length) {
                        setCategory(cg.children);
                        // setSelectBtn(cg.id);
                      } else {
                        selectedEvent({ ...cg, eventType: selectedLevel });
                        closeFun();
                      }
                    }}
                    style={[
                      {
                        width: "30%",
                        height: /*RFValue*/ 44,
                        backgroundColor: "rgba(245, 245, 245, 1)",
                        marginTop: /*RFValue*/ 16,
                      },
                      selectBtn && selectBtn.id === cg.id
                        ? styles.selected
                        : styles.notSelected,
                    ]}
                    active={selectBtn && selectBtn.id === cg.id}
                    key={cg.id}
                    type={cg.icon}
                  >
                    {cg.name}
                  </CategoryBtn>
                );
              })}
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  levelText: {
    fontSize: /*RFValue*/ 18,
    fontFamily: "HarmonyOS_Sans_SC_Regular",
    fontWeight: "700",
    color: "rgba(174, 174, 178, 1)",
  },
  selectedLevelText: {
    color: "rgba(44, 44, 46, 1)",
  },
  margin: {
    marginLeft: /*RFValue*/ 8,
    marginRight: /*RFValue*/ 8,
  },
  titleBtn: {
    flexDirection: "row",
    alignItems: "center",
    alignContent: "center",
    // height: /*RFValue*/(40),
    paddingHorizontal: /*RFValue*/ 12,
    paddingVertical: /*RFValue*/ 10,
    backgroundColor: "rgba(245, 245, 245, 1)",
    borderRadius: /*RFValue*/ 12,
  },
  titleText: {
    alignContent: "center",
    alignItems: "center",
    color: "rgba(72, 72, 74, 1)",
    fontSize: /*RFValue*/ 14,
    lineHeight: /*RFValue*/ 20,
    fontFamily: "HarmonyOS_Sans_SC_Regular",
  },
  selected: {
    backgroundColor: "#DBEBFA",
  },
  notSelected: {
    backgroundColor: "rgba(245, 245, 245, 1)",
  },
});

export default EventContent;
